<script setup lang="ts">
import { reactive } from 'vue'

const table = reactive({
  loading: false,
  records: [
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    },
    {
      host: 'q*.idc31.com',
      time: '2024-06-21',
      ip: '60.214.107.18',
      status: '安全',
      desc: 'xxxx'
    }
  ]
})

const ruleTable = reactive({
  selections: [],
  columns: [
    { label: '解析域名', prop: 'host' },
    { label: '域名解析时间', prop: 'time' },
    { label: '解析IP', prop: 'ip' },
    { label: '状态', prop: 'status' },
    { label: '描述', prop: 'desc' }
  ]
})

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 80
})

const historyList = reactive({
  selections: [],
  columns: [
    { label: 'IP', prop: 'ip' },
    { label: '地理位置', prop: 'location' },
    { label: '运营商服务商', prop: 'company' }
  ]
})

const historyTable = reactive({
  loading: false,
  records: [
    {
      ip: '103.224.212.211',
      location: '澳大利亚',
      company: 'Trellian Pty. Limited'
    },
    {
      ip: '103.224.212.220',
      location: '澳大利亚',
      company: 'Trellian Pty. Limited'
    },
    {
      ip: '152.32.215.234',
      location: '中国 中国香港',
      company: '优刻得信息科技（香港）有限公司'
    }
  ]
})

const showMore = () => {}
</script>
<template>
  <!-- 解析域名列表 -->
  <jmp-table
    :data="table.records"
    :columns="ruleTable.columns"
    :loading="table.loading"
    @selection-change="ruleTable.selections = $event"
  />
  <!-- 分页 -->
  <jmp-pagination
    v-model:page="page.pageNum"
    v-model:limit="page.pageSize"
    v-model:total="page.total"
  />
  <!-- 历史解析 -->
  <div class="history">
    <div class="title">{{ `历史解析IP(${historyTable.records.length})` }}</div>
    <jmp-table
      :data="historyTable.records"
      :columns="historyList.columns"
      :loading="historyTable.loading"
      @selection-change="historyList.selections = $event"
    />
  </div>
  <!-- 查看更多 -->
  <div class="more">
    <jm-button link type="primary" @click="showMore"> 查看更多 </jm-button>
  </div>
</template>
<style scoped lang="scss">
.title {
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.more {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
</style>
